<template>
    <div class="homeContainer">
         <!--顶部滚动条-->
         <mt-swipe :auto="4000" class="header_swipe">
            <mt-swipe-item v-for="item in bannerDatas" :key="item.id">
                <img :src="item.img" alt="" class="bannerImg"  @click="bannerClick(item.url)">
            </mt-swipe-item>
        </mt-swipe>

        <!--类型选择模块-->
        <div class="typeTable">

             <mt-swipe :auto="0"  class="type_swipe">
                <mt-swipe-item  v-for="(typeItems,index) in typeDatas" :key="index">
                    
                     <ul>
                        <li class="typeTable_iteem" v-for="typeItem in typeItems" :key="typeItem.id"  @click="typeClick(typeItem.id)">
                            <div class="typeContextDiv">
                                <img :src="typeItem.img" alt="">
                                <p>{{typeItem.name}}</p>
                            </div>
                        </li>
                    </ul>
                    
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <div id="shoplist-title" class="shoplist-title">推荐商家</div>

        <resturant-list :url="'resturant/get/good'"></resturant-list>

    </div>
</template>


<script>
 import { Toast } from 'mint-ui';
export default {
   

    data(){
        return {
            bannerDatas:[],
            typeDatas:[],
            offsetTop:"",
            isFresh:false,
        }
    },
    created(){
      
        this.initBanner();
        this.initType();
    },
    activated() {
        //  debugger
        //   if(this.isFresh){
        //     this.isFresh = false;
        //     window.location.reload(false)
        // }
        document.getElementsByClassName("homeContainer")[0].scrollTop = this.offsetTop;
    },
    deactivated() {
    　　this.offsetTop = document.getElementsByClassName("homeContainer")[0].scrollTop;
    }, 
   
      beforeRouteLeave(to, from, next){
        from.meta.keepAlive = true;
        from.meta.keepAlive_two = true;
         next();
    },
    beforeRouteEnter(to, from, next){
        
        let name = from.name
        if(name == "login"){
            // to.meta.keepAlive = false;
            // to.meta.keepAlive_two = false;
            next(vm=>{
                vm.isFresh  = true;
                window.location.reload(false)
            });
            return;
        }
        next();
    },


    methods:{
        initBanner(){
            this.$http.get("banner/get").then(res=>{
               let body = res.body;
                if(!body.success){
                    Toast( body.msg);
                    return;
                }
                
                let data = body.data;
                this.bannerDatas  = data;
            })
        },

        bannerClick(url){
             this.$router.push({path:"/onlyHead/iframe",query:{url:url}})    
        },

        initType(){
            this.$http.get("type/get/all").then(res=>{
                let body =  res.body;
                if(!body.success){
                  Toast( body.msg);
                  return;
                }
                let data = body.data;
                //this.typeDatas = data;
                let count = 0;
                let typeRsult = [];
                let typePage = null;
                for(typeObj of data){
                    if(count%10 == 0){
                        typePage = [];
                        typeRsult.push(typePage)
                    }
                    typePage.push(typeObj);
                    count++;
                }

                this.typeDatas = typeRsult;
                
            });
        },
        typeClick(id){
            this.$router.push({path:"/main/business",query:{type:id}})
        }

    }
}
</script>


<style scoped>
     .homeContainer{
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .header_swipe{
        height: 100px;
        width: 100%;
    }
    .bannerImg{
        width: 100%;
    }

    .typeTable_iteem .typeContextDiv{
        width: 14vw
    }

    .typeTable_iteem img{
        width: 100%
    }

     .typeTable_iteem p{
         text-align: center;
    }

    .typeTable_iteem{
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        float: left;
    }

    .type_swipe{
        height: 55vw;
        margin-top: 10px;
    }

    .typeContextDiv p{
        display: block;
        color: #666;
        font-size: 12px;
    }

    .typeTable_iteem :active{
        background-color: #eeeeee
    }

    .shoplist-title {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-çjustify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: .96rem;
        height: 9.6vw;
        font-size: 16px;
        color: #000;
}

.shoplist-title:after, .shoplist-title:before {
    display: block;
    content: "";
    width: .533333rem;
    width: 5.333333vw;
    height: .026667rem;
    height: .266667vw;
    background-color: #999;
} 

.shoplist-title:before {
    margin-right: 3.466667vw;
}

.shoplist-title:after {
    margin-left: 3.466667vw;
}

</style>

<style>
.typeTable .type_swipe .mint-swipe-indicators .is-active{
    background: #90ab51;
}
</style>


